<template>
  <div class="home-container">
    <!-- 广告弹窗 -->
    <div v-if="showAd" class="ad-overlay">
      <div class="ad-container">
        <div class="ad-close" @click="closeAd">
          <el-icon><Close /></el-icon>
        </div>
        
        <!-- 广告轮播 -->
        <div class="ad-carousel">
          <div 
            v-for="(ad, index) in adList" 
            :key="ad.adId"
            class="ad-slide"
            :class="{ active: currentAdIndex === index }"
          >
            <a :href="ad.linkUrl" target="_blank" @click="handleAdClick(ad.adId)">
              <img :src="ad.imageUrl" :alt="ad.title" class="ad-image" />
            </a>
            <div class="ad-title">{{ ad.title }}</div>
            <div class="ad-description" v-if="ad.description">{{ ad.description }}</div>
          </div>
          
          <!-- 轮播指示器 -->
          <div v-if="adList.length > 1" class="ad-indicators">
            <span 
              v-for="(ad, index) in adList" 
              :key="ad.adId"
              class="ad-indicator"
              :class="{ active: currentAdIndex === index }"
              @click="goToAd(index)"
            ></span>
          </div>
          
          <!-- 轮播控制按钮 -->
          <div v-if="adList.length > 1" class="ad-controls">
            <button class="ad-control prev" @click="prevAd">
              <el-icon><ArrowLeft /></el-icon>
            </button>
            <button class="ad-control next" @click="nextAd">
              <el-icon><ArrowRight /></el-icon>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="logo" @click="$router.push('/')">
        <img src="../assets/logo.png" alt="自驾游系统" />
        <h1>自驾游探索</h1>
      </div>
      <div class="nav-menu">
        <el-menu mode="horizontal" :ellipsis="false" router>
          <el-menu-item index="/">
            <el-icon><HomeFilled /></el-icon>
            首页
          </el-menu-item>
          <el-menu-item index="/attractions">
            <el-icon><Place /></el-icon>
            景点浏览
          </el-menu-item>
          <el-menu-item index="/forum">
            <el-icon><ChatDotRound /></el-icon>
            旅游论坛
          </el-menu-item>
          <el-menu-item index="/about">
            <el-icon><InfoFilled /></el-icon>
            关于我们
          </el-menu-item>
        </el-menu>
      </div>
      <div class="user-actions">
        <el-button v-if="!isLoggedIn" type="primary" @click="login">
          <el-icon><User /></el-icon>
          登录
        </el-button>
        <el-dropdown v-else trigger="click" :hide-on-click="false">
          <span class="el-dropdown-link" tabindex="-1">
            <el-avatar 
              :size="40" 
              :src="userAvatarUrl || defaultAvatarUrl" 
              :icon="UserFilled" 
              tabindex="-1"
            ></el-avatar>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="goToUserCenter">
                <el-icon><User /></el-icon>个人中心
              </el-dropdown-item>
              <el-dropdown-item @click="goToFavorites">
                <el-icon><Star /></el-icon>我的收藏
              </el-dropdown-item>
              <el-dropdown-item v-if="userStore.user && userStore.user.role === 'admin'" @click="goToAdmin">
                <el-icon><Setting /></el-icon>管理员控制台
              </el-dropdown-item>
              <el-dropdown-item divided @click="logout">
                <el-icon><SwitchButton /></el-icon>退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>

    <!-- 添加主要内容区域的包装器 -->
    <div class="main-content">
      <!-- 轮播图 -->
      <div class="banner">
        <div class="custom-carousel">
          <div class="carousel-container">
            <div 
              v-for="(item, index) in bannerImages" 
              :key="index"
              class="carousel-slide"
              :class="{ active: currentSlide === index }"
              :style="{ backgroundImage: `url(${item.url})` }"
            >
              <div class="carousel-content">
                <div class="carousel-text">
                  <h2>{{ item.title }}</h2>
                  <p>{{ item.description }}</p>
                  <el-button type="primary" size="large" class="explore-btn">开始探索</el-button>
                </div>
              </div>
            </div>
          </div>
          
          <div class="carousel-controls">
            <button class="carousel-arrow prev" @click="prevSlide">
              <el-icon><ArrowLeft /></el-icon>
            </button>
            <div class="carousel-indicators">
              <span 
                v-for="(_, index) in bannerImages" 
                :key="index"
                class="indicator"
                :class="{ active: currentSlide === index }"
                @click="goToSlide(index)"
              ></span>
            </div>
            <button class="carousel-arrow next" @click="nextSlide">
              <el-icon><ArrowRight /></el-icon>
            </button>
          </div>
        </div>
      </div>

      <!-- 搜索框 -->
      <div class="search-section">
        <el-card class="search-card">
          <div class="search-title">
            <h2>
              <el-icon><Compass /></el-icon>
              探索您的下一个自驾目的地
            </h2>
          </div>
          <el-form :inline="true" class="search-form">
            <el-form-item>
              <el-input 
                v-model="searchKeyword" 
                placeholder="输入景点名称或关键词"
                class="search-input"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="selectedCategory" placeholder="选择景点类别">
                <template #prefix>
                  <el-icon><Menu /></el-icon>
                </template>
                <el-option 
                  v-for="category in categories" 
                  :key="category.category_id" 
                  :label="category.category_name" 
                  :value="category.category_id" 
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchAttractions">
                <el-icon><Search /></el-icon>
                搜索
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <!-- 热门景点分类 -->
      <div class="category-section">
        <div class="section-title">
          <h2>
            <el-icon><Star /></el-icon>
            热门景点分类
          </h2>
          <el-link type="primary" :underline="false" @click="$router.push('/attractions')">
            查看全部 
            <el-icon><ArrowRight /></el-icon>
          </el-link>
        </div>
        
        <div class="category-container" v-loading="categoriesLoading">
          <el-row :gutter="20">
            <el-col 
              :xs="12" 
              :sm="12" 
              :md="6" 
              :lg="6" 
              v-for="category in hotCategories" 
              :key="category.categoryId"
            >
              <div class="category-item" @click="goToCategory(category.categoryId)">
                <div class="category-image-wrapper">
                  <img 
                    :src="category.coverImage || defaultCategoryImage" 
                    :alt="category.categoryName"
                    class="category-image"
                  />
                  <div class="category-badge" v-if="category.isHot">
                    <el-icon><Star /></el-icon> 热门
                  </div>
                </div>
                <div class="category-content">
                  <div class="category-icon">
                    <el-icon :size="24"><component :is="getCategoryIcon(category.categoryName)" /></el-icon>
                  </div>
                  <div class="category-info">
                    <h3>{{ category.categoryName }}</h3>
                    <p>{{ category.description || getDefaultDescription(category.categoryName) }}</p>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          
          <!-- 空状态 -->
          <el-empty 
            v-if="hotCategories.length === 0 && !categoriesLoading" 
            description="暂无热门分类"
          />
        </div>
      </div>

      <!-- 推荐景点 -->
      <div class="attractions-section" v-loading="loadingAttractions">
        <div class="section-title">
          <h2>
            <el-icon><Promotion /></el-icon>
            热门推荐景点
          </h2>
          <el-link type="primary" :underline="false" href="/attractions">
            查看全部 
            <el-icon><ArrowRight /></el-icon>
          </el-link>
        </div>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="attraction in recommendedAttractions" :key="attraction.attractionId">
            <el-card class="attraction-card" shadow="hover" @click="goToAttractionDetail(attraction.attractionId)">
              <div class="attraction-image" :style="{ backgroundImage: `url(${attraction.coverImages[0] || ''})` }">
                <div class="attraction-rating">
                  <el-rate v-model="attraction.avgRating" disabled text-color="#ff9900" />
                  <span>{{ attraction.avgRating }}分</span>
                </div>
              </div>
              <div class="attraction-info">
                <h3>{{ attraction.name }}</h3>
                <div class="attraction-tags">
                  <el-tag v-for="(tag, index) in attraction.tags" :key="index" size="small">
                    <el-icon><component :is="getTagIcon(tag)" /></el-icon>
                    {{ tag }}
                  </el-tag>
                </div>
                <p class="attraction-desc">{{ attraction.description ? (attraction.description.substring(0, 60) + '...') : '暂无描述' }}</p>
                <div class="attraction-footer">
                  <span class="price">
                    <el-icon><Money /></el-icon>
                    ¥{{ attraction.ticketPrice || '免费' }}
                  </span>
                  <span class="view-count">
                    <el-icon><View /></el-icon>
                    {{ attraction.viewCount || 0 }}
                  </span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 用户真实评价 -->
      <div class="user-reviews-section">
        <div class="section-title">
          <h2>
            <el-icon><ChatDotRound /></el-icon>
            用户真实评价
          </h2>
          <el-link type="primary" :underline="false" href="/reviews">
            查看全部 
            <el-icon><ArrowRight /></el-icon>
          </el-link>
        </div>
        
        <el-row :gutter="20" v-loading="loadingReviews">
          <el-col :xs="24" :sm="12" :md="8" v-for="review in topReviews" :key="review.commentId">
            <el-card class="review-card" shadow="hover">
              <div class="review-header">
                <div class="user-info">
                  <el-avatar :size="40" :src="review.user?.avatar || defaultAvatarUrl"></el-avatar>
                  <div class="user-details">
                    <h4>{{ review.user?.nickname || review.user?.username || '匿名用户' }}</h4>
                    <span class="review-date">{{ review.createdAt }}</span>
                  </div>
                </div>
                <div class="review-meta">
                  <span class="like-count">
                    <el-icon><Star /></el-icon>
                    {{ review.likeCount || 0 }}
                  </span>
                </div>
              </div>
              
              <div class="review-content">
                <p>{{ review.content }}</p>
              </div>
              
              <div class="review-footer">
                <span class="attraction-name">
                  <el-icon><Place /></el-icon>
                  {{ review.attraction?.name || '未知景点' }}
                </span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 旅游攻略 -->
      <div class="travel-tips-section">
        <div class="section-title">
          <h2>
            <el-icon><Reading /></el-icon>
            精选旅游攻略
          </h2>
          <el-link type="primary" :underline="false" href="/travel-tips">
            查看全部 
            <el-icon><ArrowRight /></el-icon>
          </el-link>
        </div>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" v-for="tip in travelTips" :key="tip.tip_id">
            <el-card class="travel-tip-card" shadow="hover" @click="goToTravelTip(tip.tip_id)">
              <div class="travel-tip-image" :style="{ backgroundImage: `url(${tip.cover_image})` }">
                <div class="travel-tip-overlay">
                  <span class="travel-tip-category">{{ tip.category }}</span>
                </div>
              </div>
              <div class="travel-tip-info">
                <h3>{{ tip.title }}</h3>
                <p>{{ tip.summary }}</p>
                <div class="travel-tip-footer">
                  <div class="travel-tip-author">
                    <el-avatar :size="24" :src="tip.author.avatar"></el-avatar>
                    <span>{{ tip.author.name }}</span>
                  </div>
                  <div class="travel-tip-stats">
                    <span>
                      <el-icon><View /></el-icon> {{ tip.view_count }}
                    </span>
                    <span>
                      <el-icon><ChatDotRound /></el-icon> {{ tip.comment_count }}
                    </span>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 页脚 -->
    <el-footer class="footer">
      <div class="footer-content">
        <div class="footer-section">
          <h3>关于我们</h3>
          <p>自驾游探索是一个专注于为自驾游爱好者提供景点推荐、路线规划和旅游攻略的平台。</p>
          <div class="social-icons">
            <el-icon size="24" class="social-icon"><ChatDotSquare /></el-icon>
            <el-icon size="24" class="social-icon"><Share /></el-icon>
            <el-icon size="24" class="social-icon"><Connection /></el-icon>
            <el-icon size="24" class="social-icon"><VideoPlay /></el-icon>
          </div>
        </div>
        <div class="footer-section">
          <h3>快速链接</h3>
          <ul class="footer-links">
            <li><el-icon><ArrowRight /></el-icon> <a href="/">首页</a></li>
            <li><el-icon><ArrowRight /></el-icon> <a href="/attractions">景点浏览</a></li>
            <li><el-icon><ArrowRight /></el-icon> <a href="/forum">旅游论坛</a></li>
            <li><el-icon><ArrowRight /></el-icon> <a href="/about">关于我们</a></li>
          </ul>
        </div>
        <div class="footer-section">
          <h3>联系我们</h3>
          <ul class="contact-info">
            <li><el-icon><Location /></el-icon> 北京市海淀区中关村大街1号</li>
            <li><el-icon><Phone /></el-icon> 400-123-4567</li>
            <li><el-icon><Message /></el-icon> contact@zijia.com</li>
          </ul>
        </div>
        <div class="footer-section">
          <h3>订阅我们</h3>
          <p>订阅我们的新闻通讯，获取最新的旅游资讯和优惠信息。</p>
          <div class="subscribe-form">
            <el-input placeholder="您的邮箱地址" class="subscribe-input">
              <template #prefix>
                <el-icon><Message /></el-icon>
              </template>
            </el-input>
            <el-button type="primary">
              <el-icon><Position /></el-icon>
              订阅
            </el-button>
          </div>
        </div>
      </div>
      <div class="copyright">
        <p>© 2023 自驾游探索 版权所有 | <el-icon><Lock /></el-icon> 隐私政策 | <el-icon><Service /></el-icon> 服务条款</p>
      </div>
    </el-footer>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import { ElMessage, ElMessageBox } from 'element-plus';
import { 
  HomeFilled, 
  Place, 
  ChatDotRound, 
  InfoFilled, 
  User,
  UserFilled,
  Star, 
  SwitchButton, 
  Search,
  ChatLineRound,
  Calendar,
  PictureFilled,
  Sunny,
  Cloudy,
  Lightning,
  Ship,
  ArrowLeft,
  ArrowRight,
  Compass,
  Menu,
  Promotion,
  StarFilled,
  Money,
  View,
  Reading,
  ChatDotSquare,
  Share,
  Connection,
  VideoPlay,
  Location,
  Phone,
  Message,
  Position,
  Lock,
  Service,
  Setting,
  Close,
} from '@element-plus/icons-vue';
import { getCategoryList } from '@/api/category';
import { getAttractionList } from '@/api/attraction';
import api from '@/api/auth';
import { getActiveAdvertisementsByPositionAndTimeSlot } from '@/api/advertisement';

const router = useRouter();
const userStore = useUserStore();

// 使用计算属性获取登录状态
const isLoggedIn = computed(() => userStore.isLoggedIn);

// 轮播图数据
const bannerImages = ref([
  {
    url: 'https://images.pexels.com/photos/1271619/pexels-photo-1271619.jpeg?auto=compress&cs=tinysrgb&w=1600',
    title: '探索中国绝美自驾路线',
    description: '从壮丽山川到历史古迹，发现最适合自驾的旅游胜地'
  },
  {
    url: 'https://images.pexels.com/photos/3935702/pexels-photo-3935702.jpeg?auto=compress&cs=tinysrgb&w=1600',
    title: '自驾游玩全攻略',
    description: '专业路线规划，景点推荐，让您的自驾之旅更加完美'
  },
  {
    url: 'https://images.pexels.com/photos/1118448/pexels-photo-1118448.jpeg?auto=compress&cs=tinysrgb&w=1600',
    title: '发现隐藏的自然奇观',
    description: '远离城市喧嚣，探索鲜为人知的自然风光'
  }
]);

// 轮播图控制
const currentSlide = ref(0);
const slideInterval = ref(null);

const nextSlide = () => {
  currentSlide.value = (currentSlide.value + 1) % bannerImages.value.length;
};

const prevSlide = () => {
  currentSlide.value = (currentSlide.value - 1 + bannerImages.value.length) % bannerImages.value.length;
};

const goToSlide = (index) => {
  currentSlide.value = index;
};

const startSlideShow = () => {
  slideInterval.value = setInterval(() => {
    nextSlide();
  }, 5000);
};

const stopSlideShow = () => {
  clearInterval(slideInterval.value);
};

// 搜索相关
const searchKeyword = ref('');
const selectedCategory = ref('');
const selectedLocation = ref('');
const selectedDate = ref('');

const searchAttractions = () => {
  router.push({
    path: '/attractions',
    query: {
      keyword: searchKeyword.value,
      category: selectedCategory.value
    }
  });
};

// 分类数据
const categories = ref([
  { category_id: 1, category_name: '自然景观类' },
  { category_id: 2, category_name: '历史文化类' },
  { category_id: 3, category_name: '休闲度假类' },
  { category_id: 4, category_name: '主题乐园类' }
]);

// 热门分类数据
const hotCategories = ref([]);
const categoriesLoading = ref(false);
const defaultCategoryImage = 'https://via.placeholder.com/300x200?text=No+Image';

// 获取热门分类
const fetchHotCategories = async () => {
  categoriesLoading.value = true;
  try {
    const params = {
      pageNum: 1,
      pageSize: 6, // 限制显示6个热门分类
      isHot: true, // 只获取热门分类
      sort: 'sortOrder',
      order: 'asc'
    };
    
    const response = await getCategoryList(params);
    
    if (response.code === 200 && response.data) {
      hotCategories.value = response.data.list || [];
    } else {
      console.error('获取热门分类失败:', response.message);
    }
  } catch (error) {
    console.error('获取热门分类请求失败:', error);
  } finally {
    categoriesLoading.value = false;
  }
};

// 根据分类名称获取对应的图标
const getCategoryIcon = (categoryName) => {
  const iconMap = {
    '自然景观类': 'Sunny',
    '历史文化类': 'Collection',
    '休闲度假类': 'Ship',
    '主题公园类': 'Present',
    '乡村旅游类': 'House',
    '民俗风情类': 'Stamp'
  };
  
  return iconMap[categoryName] || 'Location';
};

// 跳转到分类页面
const goToCategory = (categoryId) => {
  router.push({
    path: '/attractions',
    query: { 
      categoryId: categoryId,
      categoryName: hotCategories.value.find(c => c.categoryId === categoryId)?.categoryName || ''
    }
  });
};

// 获取标签图标的方法
const getTagIcon = (tag) => {
  const tagIconMap = {
    '世界遗产': 'Place',
    '5A景区': 'Star',
    '免费景点': 'Money',
    '海滨风光': 'Sunny',
    '亲子度假': 'UserFilled',
    '自然景观类': 'Sunny',
    '历史文化类': 'Collection',
    '休闲度假类': 'SuitcaseLine',
    '主题乐园类': 'Present'
  };
  
  return tagIconMap[tag] || 'Promotion';
};

// 推荐景点数据
const recommendedAttractions = ref([]);
const loadingAttractions = ref(false);

// 获取推荐景点
const fetchRecommendAttractions = async () => {
  loadingAttractions.value = true;
  try {
    // 使用getAttractionList接口，添加排序参数获取热门景点
    const response = await getAttractionList({ 
      pageSize: 8,
      pageNum: 1,
      orderBy: 'viewCount',
      orderDirection: 'desc'
    });
    
    if (response.code === 200) {
      // 适配后端返回的数据结构
      recommendedAttractions.value = response.data.list || response.data.records || [];
      
      // 处理数据字段，适配前端显示需要
      recommendedAttractions.value.forEach(item => {
        // 确保viewCount字段存在（有些返回的是viewCount，有些是visitCount）
        if (item.visitCount !== undefined && item.viewCount === undefined) {
          item.viewCount = item.visitCount;
        }
        
        // 确保coverImages是数组
        if (!Array.isArray(item.coverImages)) {
          item.coverImages = item.coverImages ? [item.coverImages] : [];
        }
        
        // 确保tags是数组
        if (!Array.isArray(item.tags)) {
          item.tags = item.tags ? [item.tags] : [];
        }
        
        // 处理票价显示
        if (typeof item.ticketPrice === 'number') {
          item.ticketPrice = item.ticketPrice.toFixed(0);
        }
      });
    } else {
      ElMessage.error(response.message || '获取推荐景点失败');
    }
  } catch (error) {
    console.error('获取推荐景点失败:', error);
    ElMessage.error('获取推荐景点失败，请稍后再试');
  } finally {
    loadingAttractions.value = false;
  }
};

const goToAttractionDetail = (id) => {
  router.push(`/attraction/${id}`);
};

// 旅游攻略数据
const travelTips = [
  {
    tip_id: 1,
    title: '自驾游必备物品清单',
    cover_image: 'https://images.pexels.com/photos/1252500/pexels-photo-1252500.jpeg?auto=compress&cs=tinysrgb&w=600',
    author: '旅行达人',
    publish_date: '2023-05-15',
    view_count: 3560
  },
  {
    tip_id: 2,
    title: '如何规划完美的自驾路线',
    cover_image: 'https://images.pexels.com/photos/1252500/pexels-photo-1252500.jpeg?auto=compress&cs=tinysrgb&w=600',
    author: '路线规划师',
    publish_date: '2023-06-02',
    view_count: 2890
  },
  {
    tip_id: 3,
    title: '自驾游安全指南',
    cover_image: 'https://images.pexels.com/photos/1252500/pexels-photo-1252500.jpeg?auto=compress&cs=tinysrgb&w=600',
    author: '安全专家',
    publish_date: '2023-04-28',
    view_count: 4120
  }
];

const goToTravelTip = (tipId) => {
  console.log('前往旅游攻略', tipId);
  // 实际项目中这里会跳转到旅游攻略详情页面
};

// 用户评价数据
const userComments = ref([]);

// 用户头像URL
const userAvatarUrl = computed(() => {
  if (userStore.user && userStore.user.avatar) {
    return userStore.user.avatar;
  }
  return null;
});

// 默认头像URL
const defaultAvatarUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png');

// 用户操作
const login = () => {
  router.push('/login');
};

const goToUserCenter = () => {
  router.push('/user');
};

const goToFavorites = () => {
  router.push('/favorites');
};

const goToAdmin = () => {
  router.push('/admin');
};

const logout = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要退出登录吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    );
    
    userStore.logout();
    ElMessage.success('已成功退出登录');
    
    // 如果当前在需要登录的页面，则跳转到首页
    const currentRoute = router.currentRoute.value;
    if (currentRoute.meta.requiresAuth) {
      router.push('/');
    }
  } catch {
    // 用户取消操作
  }
};

// 截断文本
const truncateText = (text, maxLength) => {
  if (!text) return '';
  return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
};

// 获取默认描述
const getDefaultDescription = (categoryName) => {
  const defaultDescriptions = {
    '自然景观类': '探索大自然的壮丽景色，感受山水之美',
    '历史文化类': '领略悠久历史文化，探寻古代文明的足迹',
    '休闲度假类': '放松身心，享受惬意的度假时光',
    '主题公园类': '体验刺激与欢乐，适合全家人的游玩场所',
    '乡村旅游类': '体验田园风光，感受乡村生活的魅力',
    '民俗风情类': '了解地方特色文化，体验传统民俗风情'
  };
  return defaultDescriptions[categoryName] || '暂无描述';
};

// 评论相关
const topReviews = ref([]);
const loadingReviews = ref(false);

// 获取点赞数最高的评论
const fetchTopReviews = async () => {
  loadingReviews.value = true;
  try {
    // 获取已审核的评论，按点赞数排序
    const response = await api.get('/comment/list', {
      params: {
        pageSize: 6,
        pageNum: 1,
        status: 1,  // 只获取已审核通过的评论
        orderBy: 'likeCount',
        orderDirection: 'desc'
      }
    });
    
    if (response.code === 200 && response.data) {
      topReviews.value = response.data.list || [];
    } else {
      console.error('获取评论失败:', response.message);
    }
  } catch (error) {
    console.error('获取评论列表失败:', error);
  } finally {
    loadingReviews.value = false;
  }
};

// 广告相关状态
const showAd = ref(false);
const adList = ref([]);
const currentAdIndex = ref(0);
const homePositionId = 2; // 首页推荐位的ID
const autoPlayTimer = ref(null);
const autoPlayInterval = 5000; // 自动轮播间隔，5秒

// 获取并显示广告
const fetchAndShowAd = async () => {
  try {
    const response = await getActiveAdvertisementsByPositionAndTimeSlot(homePositionId);
    
    if (response.code === 200 && response.data && response.data.length > 0) {
      adList.value = response.data;
      showAd.value = true;
      
      // 记录广告展示
      adList.value.forEach(ad => {
        recordAdView(ad.adId);
      });
      
      // 如果有多个广告，启动自动轮播
      if (adList.value.length > 1) {
        startAutoPlay();
      }
    }
  } catch (error) {
    console.error('获取广告失败:', error);
  }
};

// 关闭广告
const closeAd = () => {
  showAd.value = false;
  stopAutoPlay();
};

// 处理广告点击
const handleAdClick = (adId) => {
  // 记录广告点击
  recordAdClick(adId);
};

// 记录广告展示
const recordAdView = (adId) => {
  // 这里可以调用后端API记录展示次数
  console.log('广告展示:', adId);
};

// 记录广告点击
const recordAdClick = (adId) => {
  // 这里可以调用后端API记录点击次数
  console.log('广告点击:', adId);
};

// 下一个广告
const nextAd = () => {
  currentAdIndex.value = (currentAdIndex.value + 1) % adList.value.length;
  resetAutoPlay();
};

// 上一个广告
const prevAd = () => {
  currentAdIndex.value = (currentAdIndex.value - 1 + adList.value.length) % adList.value.length;
  resetAutoPlay();
};

// 跳转到指定广告
const goToAd = (index) => {
  currentAdIndex.value = index;
  resetAutoPlay();
};

// 启动自动轮播
const startAutoPlay = () => {
  stopAutoPlay(); // 先停止之前的定时器
  autoPlayTimer.value = setInterval(() => {
    nextAd();
  }, autoPlayInterval);
};

// 停止自动轮播
const stopAutoPlay = () => {
  if (autoPlayTimer.value) {
    clearInterval(autoPlayTimer.value);
    autoPlayTimer.value = null;
  }
};

// 重置自动轮播（用户交互后重新计时）
const resetAutoPlay = () => {
  if (adList.value.length > 1) {
    stopAutoPlay();
    startAutoPlay();
  }
};

// 在组件挂载时获取用户信息
onMounted(async () => {
  startSlideShow();
  
  // 如果已登录但没有用户信息，则获取用户信息
  if (isLoggedIn.value && !userStore.user) {
    try {
      await userStore.fetchCurrentUser();
    } catch (error) {
      console.error('获取用户信息失败:', error);
    }
  }
  
  // 获取热门分类
  fetchHotCategories();
  fetchRecommendAttractions();
  fetchTopReviews();
  fetchAndShowAd();
});

onBeforeUnmount(() => {
  stopSlideShow();
});

onUnmounted(() => {
  stopAutoPlay();
});
</script>

<style scoped>
/* 通用部分样式 */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 部分标题样式 */
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title h2 {
  display: flex;
  align-items: center;
  font-size: 24px;
  margin: 0;
}

.section-title h2 .el-icon {
  margin-right: 10px;
  color: #409EFF;
}

/* 用户评价部分样式 */
.comments-section {
  margin: 40px auto;
  max-width: 1200px;
  padding: 0 20px;
}

.comment-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 0 5px;
  backdrop-filter: blur(5px);
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 15px;
}

.comment-user-info {
  margin-left: 15px;
}

.comment-user-info h3 {
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.comment-content {
  flex: 1;
  overflow: hidden;
  margin-bottom: 15px;
}

.comment-content p {
  margin: 0;
  line-height: 1.6;
  font-style: italic;
  color: #333;
  font-size: 15px;
}

.comment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
  font-size: 14px;
  color: #909399;
}

.comment-attraction {
  font-weight: 600;
  color: #409EFF;
}

.comment-date {
  color: #909399;
}

/* 修改 Element Plus 轮播图样式 */
:deep(.el-carousel__item--card) {
  border-radius: 8px;
}

:deep(.el-carousel__item--card.is-active) {
  transform: translateX(0) scale(1.05) !important;
  z-index: 2;
}

:deep(.el-carousel__container) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-carousel__arrow) {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

:deep(.el-carousel__arrow:hover) {
  background-color: rgba(0, 0, 0, 0.7);
}

:deep(.el-carousel__indicators) {
  bottom: 20px;
}

:deep(.el-carousel__indicator--horizontal .el-carousel__button) {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
}

:deep(.el-carousel__indicator.is-active .el-carousel__button) {
  background-color: #fff;
}

/* 修改顶部导航栏样式 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.logo img {
  height: 40px;
  margin-right: 10px;
}

.logo h1 {
  font-size: 20px;
  margin: 0;
  color: #409EFF;
}

/* 修改导航菜单样式，使其水平居中 */
.nav-menu {
  flex: 1;
  display: flex;
  justify-content: center; /* 水平居中 */
}

/* 确保菜单项之间有均匀的间距 */
:deep(.el-menu--horizontal) {
  border-bottom: none;
  display: flex;
  justify-content: center; /* 水平居中 */
}

:deep(.el-menu--horizontal > .el-menu-item) {
  height: 60px;
  line-height: 60px;
  margin: 0 10px; /* 增加菜单项之间的间距 */
  font-size: 16px;
}

:deep(.el-menu--horizontal > .el-menu-item.is-active) {
  border-bottom: 2px solid #409EFF;
  color: #409EFF;
  font-weight: bold;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .header {
    padding: 0 10px;
    flex-wrap: wrap;
  }
  
  .logo {
    margin-right: 0;
  }
  
  .logo h1 {
    font-size: 16px;
  }
  
  .nav-menu {
    order: 3;
    width: 100%;
    margin-top: 10px;
  }
  
  :deep(.el-menu--horizontal > .el-menu-item) {
    padding: 0 10px;
    margin: 0 5px;
    font-size: 14px;
  }
  
  .user-actions {
    gap: 5px;
  }
  
  .user-actions .el-button {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* 添加全局样式确保所有内容都能正确响应 */
* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  overflow-x: hidden;
}

.home-container {
  width: 100%;
  min-height: 1000px;
  max-width: none;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4ecf7 100%);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden; /* 防止水平滚动 */
}

.banner {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  margin-bottom: 40px;
}

.custom-carousel {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.carousel-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1;
}

.carousel-slide.active {
  opacity: 1;
  z-index: 2;
}

.carousel-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
}

.carousel-text {
  width: 50%;
  padding: 0 60px;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  animation: fadeInLeft 1s ease-out;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.carousel-text h2 {
  font-size: 42px;
  margin-bottom: 20px;
  font-weight: 700;
}

.carousel-text p {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 30px;
}

.explore-btn {
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 30px;
  transition: all 0.3s ease;
}

.explore-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.carousel-controls {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

.carousel-arrow {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: white;
  margin: 0 15px;
  transition: all 0.3s ease;
}

.carousel-arrow:hover {
  background: rgba(255, 255, 255, 0.4);
}

.carousel-indicators {
  display: flex;
  gap: 10px;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background-color: #409EFF;
  transform: scale(1.2);
}

.search-section {
  margin: -50px auto 30px;
  max-width: 1000px;
  padding: 0 20px;
  position: relative;
  z-index: 10;
}

.search-card {
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.search-title {
  text-align: center;
  margin-bottom: 20px;
}

.search-title h2 {
  font-size: 24px;
  color: #303133;
}

.search-form {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.category-section,
.attractions-section,
.travel-tips-section {
  max-width: 1200px;
  margin: 50px auto;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
}

.category-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.category-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  margin-bottom: 20px;
  cursor: pointer;
  background-color: #fff;
  height: 90%; /* 确保所有卡片高度一致 */
  display: flex;
  flex-direction: column; /* 使内容垂直排列 */
}

.category-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.category-image-wrapper {
  position: relative;
  height: 140px;
  overflow: hidden;
  flex-shrink: 0; /* 防止图片区域被压缩 */
}

.category-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.category-item:hover .category-image {
  transform: scale(1.1);
}

.category-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(255, 69, 0, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(255, 69, 0, 0.3);
}

.category-content {
  padding: 15px;
  display: flex;
  align-items: flex-start; /* 改为顶部对齐 */
  gap: 12px;
  flex-grow: 1; /* 让内容区域填充剩余空间 */
}

.category-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #409EFF, #007FFF);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.category-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 60px; /* 设置最小高度确保一致性 */
}

.category-info h3 {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.category-info p {
  margin: 0;
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex-grow: 1; /* 让描述文本填充剩余空间 */
}

.attraction-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.3s;
  overflow: hidden;
}

.attraction-card:hover {
  transform: translateY(-5px);
}

.attraction-image {
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.attraction-rating {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 5px 10px;
  border-radius: 15px;
  color: white;
  display: flex;
  align-items: center;
  gap: 5px;
}

.attraction-info {
  padding: 15px;
}

.attraction-info h3 {
  margin: 0 0 10px;
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attraction-tags {
  margin-bottom: 10px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.attraction-desc {
  color: #606266;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.attraction-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  color: #F56C6C;
  font-weight: bold;
}

.view-count {
  color: #909399;
  display: flex;
  align-items: center;
  gap: 5px;
}

.travel-tips-section {
  margin-bottom: 50px;
}

.travel-tip-card {
  height: 100%;
  margin-bottom: 20px;
}

.travel-tip-image {
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.travel-tip-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: white;
}

.travel-tip-info {
  padding: 15px;
}

.travel-tip-info h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.travel-tip-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.travel-tip-author {
  display: flex;
  align-items: center;
  gap: 5px;
}

.travel-tip-stats {
  display: flex;
  align-items: center;
  gap: 5px;
}

.footer {
  background-color: #303133;
  color: #fff;
  padding: 40px 20px 20px;
  margin-top: 50px;
  width: 100%;
  box-sizing: border-box;
}

.el-footer {
  height: auto !important;
  min-height: 300px;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 30px;
}

.footer-section {
  flex: 1;
  min-width: 250px;
  margin-bottom: 20px;
  padding: 0 15px;
}

.footer-section h3 {
  font-size: 18px;
  margin-bottom: 15px;
  position: relative;
  padding-bottom: 10px;
}

.footer-section h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 2px;
  background-color: #409EFF;
}

.social-icons {
  display: flex;
  gap: 15px;
}

.social-icons .el-icon {
  font-size: 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.social-icons .el-icon:hover {
  color: #409EFF;
}

.copyright {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  width: 100%;
}

.copyright p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

/* 社交图标样式 */
.social-icon {
  cursor: pointer;
  transition: transform 0.3s;
}

.social-icon:hover {
  transform: translateY(-3px);
  color: #409EFF !important;
}

/* 页脚链接样式 */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
  margin-left: 5px;
}

.footer-links a:hover {
  color: #409EFF;
}

/* 联系信息样式 */
.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-info li {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.contact-info li i {
  margin-right: 10px;
}

/* 订阅表单样式 */
.subscribe-form {
  display: flex;
  margin-top: 15px;
}

.subscribe-input {
  margin-right: 10px;
}

/* 收藏图标样式 */
.attraction-favorite {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  transition: transform 0.3s;
}

.attraction-favorite:hover {
  transform: scale(1.2);
}

.favorite-icon {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

/* 分类卡片图标样式 */
.category-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.category-overlay i {
  margin-bottom: 10px;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
}

/* 用户头像样式 */
.user-actions {
  display: flex;
  align-items: center;
}

.el-dropdown {
  cursor: pointer;
  outline: none; /* 移除焦点轮廓 */
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  outline: none; /* 移除焦点轮廓 */
}

.el-avatar {
  background-color: #409EFF;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s;
  outline: none; /* 移除焦点轮廓 */
  border: none; /* 移除边框 */
}

.el-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 移除所有焦点轮廓 */
:focus {
  outline: none !important;
}

/* 移除点击时的黑色边框 */
.el-dropdown:focus-visible,
.el-dropdown-link:focus-visible,
.el-avatar:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* 用户真实评价部分样式 */
.user-reviews-section {
  margin-bottom: 60px;
}

.review-card {
  margin-bottom: 20px;
  height: 100%;
  transition: all 0.3s;
}

.review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-details {
  margin-left: 10px;
}

.user-details h4 {
  margin: 0;
  font-size: 16px;
}

.review-date {
  font-size: 12px;
  color: #909399;
}

.review-meta {
  display: flex;
  align-items: center;
}

.like-count {
  display: flex;
  align-items: center;
  color: #F56C6C;
  font-weight: bold;
}

.like-count .el-icon {
  margin-right: 5px;
}

.review-content {
  flex: 1;
  overflow: hidden;
  margin-bottom: 15px;
}

.review-content p {
  margin: 0;
  line-height: 1.6;
  font-style: italic;
  color: #333;
  font-size: 15px;
}

.review-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.attraction-name {
  color: #409EFF;
  font-weight: bold;
}

/* 广告样式 - 优化版 */
.ad-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeIn 0.4s ease-out;
  backdrop-filter: blur(5px);
}

.ad-container {
  position: relative;
  max-width: 65%;  /* 从80%减小到65% */
  max-height: 75%;  /* 从85%减小到75% */
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  animation: scaleIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transform-origin: center;
}

.ad-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 36px;
  height: 36px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 1;
  transition: all 0.3s;
  font-size: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ad-close:hover {
  background-color: rgba(0, 0, 0, 0.9);
  transform: rotate(90deg);
}

.ad-image {
  display: block;
  max-width: 100%;
  max-height: 60vh;  /* 从70vh减小到60vh */
  object-fit: contain;
  transition: transform 0.3s ease;
}

.ad-container a:hover .ad-image {
  transform: scale(1.02);
}

.ad-title {
  padding: 16px 16px 6px;  /* 减小内边距 */
  font-size: 20px;  /* 从22px减小到20px */
  font-weight: bold;
  color: #303133;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 6px;
  position: relative;
  z-index: 5;
}

.ad-description {
  padding: 0 16px 30px;  /* 减小内边距 */
  font-size: 15px;  /* 从16px减小到15px */
  color: #606266;
  line-height: 1.5;
  position: relative;
  z-index: 5;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* 添加响应式设计 */
@media (max-width: 768px) {
  .ad-container {
    max-width: 85%;  /* 从90%减小到85% */
  }
}

/* 广告轮播样式 */
.ad-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ad-slide {
  display: none;
  width: 100%;
  position: relative;
}

.ad-slide.active {
  display: block;
  animation: fadeIn 0.5s ease-out;
}

.ad-indicators {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 10;
  padding: 10px 0;
  background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
}

.ad-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  margin: 0 4px;
}

.ad-indicator.active {
  background-color: #409EFF;
  transform: scale(1.3);
}

.ad-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  transform: translateY(-50%);
  z-index: 2;
}

.ad-control {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
  opacity: 0.7;
}

.ad-control:hover {
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 1;
}

.ad-container:hover .ad-control {
  opacity: 1;
}
</style>